<template>
   <div class="time">
        <div class="progress"><span>投资任务进度：{{roundId}}&nbsp;/12</span></div>
        <div class="resttime">当前投资实验周期剩余时间：
          <span v-if="countShow">
            <van-count-down auto-start millisecond :time="countDownTime" format="mm:ss:SS" @finish="countFinish" id="color"/>
          </span>
        </div>
    </div>
</template>

<script>
import {selectAllByExperimentId} from "@/api/Initial";
import {endTime} from "@/api/stage";
import {clear} from "@/api/insertExperiment";

let num123 = 1
let stageNum123 = 1
let setStageTime = 0
let setRoundTime = 0
export default{
  name:"timeT",
  data() {
    return{
      roundId: num123,
      countShow: false,
      timer: null,  //循环计时器
      countDownTime: 15*60*1000,
      stage: {
        stageId: 0,
        userId: 0,
        stageTotalTime: '0'
      },
    }
  },
  mounted() {
    if(this.$cookies.get('roundId') == null){
      this.roundId = 1
    } else {
      // stageNum123 = parseInt( this.$cookies.get('roundId') )
      this.roundId = this.$cookies.get('roundId')
    }
    //因为Cookies.get()不能获取expires，所以才设定value值为expires方便获取
    let cookiesTime = Date.parse(this.$cookies.get("key"));
    // 把要过期的时间转化为时间戳方便计算
    // Date.parse方法用来解析日期字符串，将日期格式转化为字符串（ES5）
    if (cookiesTime) {
      // 有cookie值则继续倒计时
      this.countShow = true;
      this.timer = setInterval(() => {
        let nowTime = Date.now();
        // Date.now方法返回当前时间戳
        this.countDownTime = cookiesTime - nowTime;
        if (this.countDownTime <= 0) {
          this.countFinish();
        }
      }, 0);
    } else {
      this.countFinish();
    }
    this.getStageTime()
  },
  methods: {

    getStageTime(){
      selectAllByExperimentId(parseInt(this.$cookies.get('sites'))).then(res => {
        setStageTime = parseInt(res.data.data.all.restInitial)
        setRoundTime = parseInt( res.data.data.all.roundInitial )
        console.log(res.data.data.all)
      })
    },

    changeRoundId(){
      var newRound = this.$cookies.get('roundId')
      let round = new Date(new Date().getTime() + setRoundTime * 1000);
      this.$cookies.set("roundTimes",round, setRoundTime + "S");
      // console.log(newRound)
      if(newRound == null){
        this.$cookies.set('roundId',2)
        num123 = this.$cookies.get('roundId')
      }
      if(newRound != null){
        this.$cookies.set('roundId',parseInt( newRound ) + 1)
        num123 = parseInt( newRound ) + 1
      }
      if(parseInt( newRound ) == 12){
        this.$cookies.remove('roundId')
        var newStage = this.$cookies.get('stageId')
        if(newStage == null){
          stageNum123 = stageNum123 + 1
          this.$cookies.set('stageId',stageNum123)
        }
        if(newStage != null) {
          console.log(newStage)
          if( parseInt( newStage ) == 3){
            this.$cookies.remove('stageId')
            stageNum123 = 1
          } else {
            stageNum123 = stageNum123 + 1
            this.$cookies.set('stageId',stageNum123)
          }
        }
        num123 = 1
        let expires = new Date(new Date().getTime() + setStageTime * 60 * 1000);
        this.$cookies.set("rest",expires,setStageTime + "MIN")
        this.$router.push('/xiuxi')
      }
    },
    //倒计时结束要执行的方法
    countFinish() {
      //清除计时器
      clearInterval(this.timer);
      //下一阶段
    }
  },
}

</script>

<style scoped>
    .time{
      height: 50px;
      margin: 0 auto;
      width: 1100px;
      display: flex;
      justify-content: space-between;
    }

    .progress{
      color: #0071fc;
      font-size: 20px;
      font-weight: 700;
    }

    .resttime{
      color: #333;
      font-size: 17px;
      font-weight: 800;
      display: flex;
      line-height: 22px;

    }
#color{
  font-size: 20px;
  color: #0071fc;
}

</style>
